<template>
    <header class="header">
        <!-- <el-row>
            <el-col :span="16" :offset="4">
                <el-row type="flex" justify="end">
                    <el-button icon="el-icon-message" type="text">postmaster@sczzyf.com</el-button>
                    <el-button icon="el-icon-phone" type="text">+86 028 67675699</el-button>
                    <div class="open-account">
                    	<a href="http://options.youwonn.com/tradex/mem/login.jsp" target="_blank">
	                    	<el-button type="warning" size="mini">开户注册</el-button>
                    	</a>
                    </div>
                </el-row>
            </el-col>
        </el-row> -->
        <el-row class="navs">
            <el-col :span="16" :offset="4">
                <el-row>
                    <el-col :span="4">
                        <router-link to="/" class="link"><img src="../assets/logo.png" alt="玖玖盈" title="玖玖盈"></router-link>
                    </el-col>
                    <el-col :span="20">
                    	<el-row type="flex" justify="end">
	                        <el-menu :default-active="headerIndex" class="el-menu" mode="horizontal" background-color="#000" text-color="#fff" active-text-color="#fa9822" router>
	                            <el-menu-item index="/">首页</el-menu-item>
                                <el-menu-item index="/product">产品介绍</el-menu-item>
	                            <el-menu-item index="/news">新闻中心</el-menu-item>
	                            <el-menu-item index="/activity">活动项目</el-menu-item>
	                            <el-menu-item index="/team">团队介绍</el-menu-item>
                                <el-menu-item index="/contact">关于我们</el-menu-item>
	                        </el-menu>
                            <a href="http://options.youwonn.com/tradex/mem/login.jsp" target="_blank" class="open-account">
                                <el-button type="warning" size="mini">开户注册</el-button>
                            </a>
	                    </el-row>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </header>
</template>
<script>
export default {
    data() {
        return {
            headerIndex: '/',
        };
    },
    watch: {
        '$route.path': function(val){
            this.headerIndex = val == '/' ? '/' : (val.match('/product') ? '/product' : val)
        }
    },
    created: function(){
        this.headerIndex = this.$route.path == '/' ? '/' : (this.$route.path.match('/product') ? '/product' : this.$route.path)
    }
}

</script>
<style socped>
.navs {
    background-color: #000;
}

.el-menu .el-menu-item {
    margin: 0 5px;
}

.link {
    display: block;
    height: 60px;
    line-height: 60px;
    text-align: center;
}

.link img {
    /*width: 148px;*/
    height: 45px;
    vertical-align: middle;
}
.open-account{
    line-height: 60px;
	/*padding: 10px 0;*/
	/*margin-left: 20px;*/
}
</style>
